<template>
	<view class="p-30">
		<PileVue v-if="lot==0"  :item="{ data: detail }"  :type="1" />
		<LotVue v-if="lot==1"  :item="{ data: detail }" :type="1" />

		
		<div class="flex mt-20" style="overflow-x: auto;">
			<image @click="zhanshi(img)" v-for="(img, index) in detail.images ? detail.images.split(',') : []" :key="index" :src="img"
				mode="aspectFill" class="flex-shirnk-0 mr-20 rounded-10" style="width: 288rpx;height: 144rpx">
			</image>
		</div>


		<div class="flex w-full mt-20 mb-20 fz28">
			
			<div v-if="lot==0" class="flex flex-1 ml-10 mr-10 center pt-20 pb-20 rounded-20 shadow" @click="collect">
				<image src="/static/icon/like.png" mode="widthFix" class="w-40 mr-10" v-if="detail.is_collect == 0">
				</image>
				<image src="/static/icon/liked.png" mode="widthFix" class="w-40 mr-10" v-if="detail.is_collect == 1">
				</image>
				添加收藏
			</div>
			<div v-if="lot==1" class="flex flex-1 ml-10 mr-10 center pt-20 pb-20 rounded-20 shadow" @click="collect2">
				<image src="/static/icon/like.png" mode="widthFix" class="w-40 mr-10" v-if="detail.is_collect == 0">
				</image>
				<image src="/static/icon/liked.png" mode="widthFix" class="w-40 mr-10" v-if="detail.is_collect == 1">
				</image>
				添加收藏
			</div>
			
			<div class="flex flex-1 ml-10 mr-10 center pt-20 pb-20 rounded-20 shadow text-green-2" style="position: relative;">
				<image src="/static/icon/share.png" mode="widthFix" class="w-40 mr-10"></image>
				转发分享
				<button open-type="share" style="z-index: 2;position: absolute; top: 0%;left: 0%;background-color: transparent; width: 100%;height: 100%;"></button>
			</div>
			
			<div @click="daohang(detail)" class="flex flex-1 ml-10 mr-10 center pt-20 pb-20 rounded-20 shadow text-blue">
				<image src="/static/icon/go.png" mode="widthFix" class="w-40 mr-10"></image>
				导航前往
			</div>
		</div>
		
		<view v-if="wenhao_flag==true" @click="wenhao_flag=false"  class="mask"></view>
		<view v-if="wenhao_flag==true" @click="wenhao_flag=false"  style="position: fixed;z-index: 99; background-color: #fff; font-size: 14px; line-height: 20px; padding: 20px; border-radius: 20px; top: 15%;left: 10%;width: 80%;height: 500px;overflow-y: scroll;">
			<div> <rich-text v-html="detail.cost_price1"></rich-text></div>
			<div style="margin-top: 10px;"> <rich-text v-html="detail.cost_price2"></rich-text></div>
			<div style="margin-top: 10px;"> <rich-text v-html="detail.cost_price3"></rich-text></div>
			<div style="margin-top: 10px;"> <rich-text v-html="detail.cost_price4"></rich-text></div>
		</view>

		<div class="shadow p-20 rounded-20">
			<div class="fz36 font-bold" style="position: relative;">
				价格信息
				<view v-if="lot==0" @click="wenhao" style="position: absolute; top: 0%;left: 0%;background-color: transparent; width: 95%; text-align: right; height: 100%;"><image style="padding-top: 5rpx;" @click="wenhao" src="/static/wenhao.png" mode="aspectFill" class="w-35 h-35 rounded-full"></image></view>
			</div>
			<div class="fz40 font-bold text-red mt-10"  v-if="lot==0">
				{{ detail.price }} <text class="text-black fz24">元/度</text>
			</div>
			<div class="fz40 font-bold text-red mt-10"  v-if="lot==1">
				{{ detail.price }} <text class="text-black fz24">元/小时</text>
			</div>
			<div class="flex mt-10">
				<div class="fz36 text-gray-600">{{detail.remark}}</div>
				<!-- <div class="fz36 text-gray-600">停车参考价</div>
				<div class="fz36 text-black ml-20">停车费介绍</div> -->
			</div>
			<!-- <div v-if="lot==0" class="fz36 mt-20 font-bold">服务费</div>
			<div v-if="lot==0" class="fz40  text-gray-600 mt-10">
				服务费: {{ detail.service_price }}元
			</div> -->
		</div>
		<div class="shadow p-20 rounded-20 mt-20">
			<div class="fz36 font-bold">手机号</div>
			<div class="fz32 text-gray-600 mt-10" @click="tel(detail.member)" v-if="detail.member">{{ detail.member.phone }}</div>
		</div>

		<div v-if="detail.station.type!=4" class="shadow p-20 rounded-20 mt-20">
			<div class="fz36 font-bold">充电爱车</div>
			<image src="/static/icon/select.png" @click="goAddCar" mode="widthFix" class="w-full"></image>

			<div class="car rounded-20 overflow-hidden mt-20" style="position: relative"
				@click="formData.car_id = item.id"
				:style="{ 'border': item.id == formData.car_id ? '2px solid #3662EC' : '2px solid transparent' }"
				v-for="item in carList">
				<div class="text center font-bold"
					style="position:absolute;width: 350rpx;height: 70rpx;background: #fffbdb;z-index: 9;top:30rpx;left:0">
					<div class="text-blue fz44"> {{ item.car_number }}</div>
				</div>
				<image src="/static/icon/select.png" mode="widthFix" class="w-full"
					style="margin-top: -20rpx;display: block;"></image>
			</div>

		</div>

		<div v-if="detail.station.type!=4" class="shadow p-20 rounded-20 mt-20">
			<div class="fz36 font-bold">钱包余额</div>
			<div class="center text-red">
				<text style="font-size: 70rpx;font-weight: bold;">{{ userInfo.amount }}</text> <text
					class="ml-10 mt-25">元</text>
			</div>
		</div>

		<block v-if="detail.station.type!=4">
			<div class="mt-20 center h-80 rounded-20 text-white bg-green fz40 font-bold"
				@click="formData.type = 2; submit()">预约停车</div>
			<div v-if="lot==0" class="mt-20 center h-80 rounded-20 text-white bg-yellow fz40 font-bold"
				@click="formData.type = 1; submit()">预约充电
			</div>
		</block>
		

	</view>
</template>

<script>
import PileVue from '../../components/common/Pile.vue';
import LotVue from '../../components/common/Lot.vue';

export default {
	components: {
		PileVue,LotVue
	},
	data() {
		return {
			wenhao_flag:false,
			
			formData: {
				// 车辆id
				car_id: '',
				// 电桩id(预约停车可不传)
				device_id: '',
				// 请求用户id
				member_id: '',
				// 预约类型(1:预约充电 2:预约停车)
				type: ''
			},
			id: '',
			no:'',
			lot:0,
			detail: {},
			userInfo: {},
			carList: []
		}
	},
	onShareAppMessage(res) { //发送给朋友
		return {
			title: '泊车充电'
		}
	},
	onShareTimeline(res) { //分享到朋友圈
		return {
			title: '泊车充电'
		}
	},
	onShow() {
		if(this.lot==0){
			this.getDetail()
		}else{
			this.getDetail2()
		}
		
		this.getUserInfo()
		this.getCarList()
	},
	onLoad(options) {
		console.log(options);
		this.id = options.id
		if(options.no){
			this.no = options.no
		}
		if (options.q) {
			let url = decodeURIComponent(options.q);
			let param = url.split('?')[1];
			let params2 = param.split('=')
			this.no= params2[1]
		}
		console.log(options, this.no);
	
		if(options.lot==1){
			this.lot = options.lot
		}
		
		if(this.lot==1){
			uni.setNavigationBarTitle({
					 	title: '电站停车位'
					 })
		}
	},
	methods: {
		zhanshi(pic){
			uni.previewImage({
				urls:[pic]
			})
		},
		wenhao(){
			this.wenhao_flag=true
		},
		daohang(item){
			console.log(item)
			uni.openLocation({
						latitude: parseFloat(item.lat),//纬度
						longitude: parseFloat(item.lng),//经度
						name: item.name,
						address: item.address
					});
		},
		share2() {  
			console.log('分享')
			const shareData = {
		           title: '泊车充电', // 分享标题
		           path: '/pages/index/index', // 分享路径
		           imageUrl: 'https://app.yinuoxinnengyuan.cn/static/marker.png' // 分享图标路径
		         };
		         wx.showShareMenu({
		           withShareTicket: true, // 是否使用 shareTicket，可以在回调中获取到 shareTicket
		           success() {
		             console.log('分享菜单已打开');
		           },
		           fail() {
		             console.log('分享菜单打开失败');
		           }
		         });
		         return shareData; // 直接返回分享数据对象将覆盖 JSON 配置中的分享内容
		},  
		tel(phone){
			uni.makePhoneCall({
				phoneNumber:phone
			})
		},
		async submit() {
			if(uni.getStorageSync("id")==''){
				this.toast('请先登录')
				
				setTimeout(function(){
					uni.redirectTo({
						url:'/pages/start/splash'
					})
				},2000)
			}else{
				if (!this.formData.car_id) {
					this.toast("请选择车辆")
					return
				}
				
				if(this.userInfo.amount<200){
					uni.showModal({
						title: '提示',
						content: '会员余额小于200，暂不支持预约。',
						success: function (res) {
							if (res.confirm) {
								uni.navigateTo({
									url:'/pages/my/recharge'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return
				}
				
				if(this.lot==0){
					if(this.formData.type==1){
						this.formData.device_id = this.detail.id
					}else{
						this.formData.device_id = this.detail.park_id
					}
				}else{
					this.formData.device_id = this.detail.id
				}
				
				const res = await this.http("post", '/api/order/create_order', this.formData)
				this.toast(res.message)
				if(res.code==200){
					setTimeout(function(){
						uni.navigateTo({
							url:'/pages/order/order'
						})
					},2000)
				}
			}
		},
		goAddCar() {
			if(uni.getStorageSync("id")==''){
				this.toast('请先登录')
				
				setTimeout(function(){
					uni.redirectTo({
						url:'/pages/start/splash'
					})
				},2000)
			}else{
				uni.navigateTo({
					url: `/pages/my/addCar?id=${this.id}`
				})
			}
		},
		async getUserInfo() {
			const res = await this.http("get", '/api/user/user_info', {
				id: this.detail.member_id
			})
			this.userInfo = res.data
		},
		async getDetail() {
			const res = await this.http("get", '/api/device/info', {
				id: this.id,
				no: this.no
			})
			this.detail = res.data
		},
		async getDetail2() {
			const res = await this.http("get", '/api/park/info', {
				id: this.id
			})
			this.detail = res.data
		},
		async collect() {
			if(uni.getStorageSync("id")==''){
				this.toast('请先登录')
				
				setTimeout(function(){
					uni.redirectTo({
						url:'/pages/start/splash'
					})
				},2000)
			}else{
				const res = await this.http("post", '/api/device/device_collect', {
					id: this.id
				})
				this.detail.is_collect = 1
				this.toast(res.message)
				this.getDetail()
			}
		},
		async collect2() {
			if(uni.getStorageSync("id")==''){
				this.toast('请先登录')
				
				setTimeout(function(){
					uni.redirectTo({
						url:'/pages/start/splash'
					})
				},2000)
			}else{
				const res = await this.http("post", '/api/park/park_collect', {
					id: this.id
				})
				this.detail.is_collect = 1
				this.toast(res.message)
				this.getDetail2()
			}
		},
		async getCarList() {
			if(uni.getStorageSync("id")==''){
				this.toast('请先登录')
				
				setTimeout(function(){
					uni.redirectTo({
						url:'/pages/start/splash'
					})
				},2000)
			}else{
				const res = await this.http("get", '/api/car/index', {
					member_id: this.detail.member_id
				})
				this.carList = res.data
			}
		}
	}
}
</script>

<style>
	.mask {
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 10;
	}
</style>